<template>
  <div class="sy">
    <!-- 头部 -->
    <div class="navbar">
      <van-nav-bar :border="false" @click-left="$router.push('/mine')">
        <template #title> <span class="fsbu">联系我们</span> </template>
        <template #left>
          <van-icon name="arrow-left" color="#fcfcfd" size="18px" />
        </template>
      </van-nav-bar>
    </div>
    <div class="block">
      <!-- 服务热线 -->
      <div class="service">
        <h3>服务热线</h3>
        <span>注册咨询/软件使用咨询等问题处理</span>
        <span>+86 1008611</span>
        <van-button
          onclick="window.location.href='tel:1008611'"
          round
          type="info"
          >立即拨打</van-button
        >
      </div>
      <!-- 我们的邮箱 -->
      <div class="service">
        <h3>我们的邮箱</h3>
        <span>补充资料、投诉与建议、变更账户信息、争议处理等问题处理</span>
        <span class="text-copy" @click.stop="_copy(todo.title)"
          >123456789@234.com</span
        >
        <van-button round type="info" @click="copyWx(wx)" size="medium" plain
          >复制</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
function tel() {
  if (confirm("立即拨打")) {
    window.location.href = "tel:1008611";
  }
}
export default {
  components: {},
  data() {
    return {
      wx: "123456789@234.com",
    };
  },
  methods: {
    copyWx(item) {
      // 模拟 输入框
      var cInput = document.createElement("input");
      cInput.value = item;
      document.body.appendChild(cInput);
      cInput.select(); // 选取文本框内容

      // 执行浏览器复制命令
      // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签）
      // Input要在正常的编辑状态下原生复制方法才会生效

      document.execCommand("copy");

      try {
        this.$message({
          type: "success",
          message: "复制成功",
        });
      } catch (error) {
        // console.log(error);
      }
      // 复制成功后再将构造的标签 移除
      document.body.removeChild(cInput);
    },
  },
};
</script>

<style lang="scss" scoped>
.van-nav-bar {
  ::v-deep .van-icon {
    color: black;
  }
  ::v-deep .van-nav-bar__title {
    font-weight: bold;
    font-family: "黑体";
  }
}
// 头部
.van-nav-bar {
  background-color: #f6c52b;
}
.sy {
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(
    #f6c52b,
    #f6c52b,
    #fbe397,
    #fdf1cd,
    #fefbf1,
    #fcfcfd
  );
  .fsbu {
    font-size: 0.5rem;
    color: #fefbf1;
  }
}
.block {
  width: 100%;

  .service {
    width: 90%;
    height: 250px;
    margin: auto;
    background: rgb(255, 255, 255);
    box-shadow: 0px 0px 3px 0px rgba(207, 203, 203, 1);
    margin-bottom: 15px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    // overflow: hidden;

    h3 {
      font-size: 25px;
      color: #848194;
    }

    span {
      width: 90%;
      font-size: 18px;
      color: #080808;
      white-space: pre-line;
    }
    span:nth-child(3) {
      text-align: center;
    }

    button {
      width: 90%;
      background: #f6c52b;
      height: 40px;
      border-radius: 20px;
    }
    .van-button--info {
      border: none;
    }
  }
}
</style>
